<template>
  <div class="loginContainer">
    <div class="logoBackGround">
      <div class="logoContainer">
        <img :src="logo" alt="logo" />
      </div>
    </div>
    <div class="LoginInputContainer">
      <input-component
        ref="iptCom"
        :loginWay="loginWay"
        @changeLoginWay="changeLoginWay"
      ></input-component>
    </div>
    <div class="loginBtn">
      <van-button round type="info" block color="rgba(102, 110, 232, 1)" @click="loginClickHandler">登录</van-button>
    </div>
    <div class="registerLink">
      <a href="#">注册新用户</a>
    </div>
    <div class="userSign">
      <span>登录或注册代表您同意<a href="#">用户服务协议</a></span>
    </div>
  </div>
</template>

<script>
import InputCom from "./InputCom";
import logo from "@/assets/login_img/login_logo.png";
import Vue from "vue";
import { Button } from "vant";
import { Toast } from "vant";
import { Notify } from 'vant';

Vue.use(Toast);
Vue.use(Notify);
Vue.use(Button);
export default {
  components: {
    inputComponent: InputCom,
  },
  data() {
    return {
      //登录方式：true账号密码登录 / false验证码登录
      loginWay: true,
      logo,
    };
  },
  create() {},
  mounted() {},
  methods: {
    changeLoginWay() {
      this.loginWay = !this.loginWay;
    },
    loginClickHandler(){
      //true=>验证码登录 false=>账号密码登录
      if(this.loginWay){
        let value,IptCom,vcInput
        IptCom =this.$refs.iptCom
        vcInput=IptCom.$refs.vcInput
        value=vcInput.value
        if(value!=''){
          this.$refs.iptCom.getVerifyCodeInputValue(value)
        }else{
          // Notify({ type: 'danger', message: '请填写验证码' });
          Toast.fail("请填写验证码");
        }
      }else{

      }
      console.log()
    }
  },
};
</script>

<style lang="stylus" scoped>
.loginContainer {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 2em;

  .logoBackGround {
    width: 100%;
    display: flex;
    justify-content: center;
    // align-items: center;
    margin-top: 5em;
    // background #ccc;
    height: 8em;

    .logoContainer {
      height: 4.8em;
      width: 4.8em;
      background: linear-gradient(135deg, rgb(102, 110, 232) 0%, rgb(102, 110, 232) 0%, rgb(153, 153, 255) 98%, rgb(153, 153, 255) 100%);
      border-radius: 4.8em;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 1.8em;
        height: 2em;
      }
    }
  }

  .registerLink {
    height: 2em;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    a {
      font-size: 14px;
      color: #666EE8;
    }
  }
  .userSign{
    width 100%
    height 2em 
    // background #ccc
    display flex
    justify-content center 
    align-items center
    margin-top 7em
    a{
      color: #666EE8;
    }
  }
}
</style>

<style lang="stylus">

</style>